<template>
    <div class="dindan">
        <div class="title"><img src="../assets/images/fanhui.png" alt="" @click="fanhui">评分</div>
        <div class="title_a"><img src="../assets/images/服务评价.png" alt="">订单信息</div>
        <div class="xinxi">
           <div>商品<span>{{data.prodName}}</span></div>
           <div>发货时间<span>{{data.receiveTime}}</span></div>
           <div>到达时间<span>{{data.sendTime}}</span></div>
        </div>
        <div class="fuwu">
            <div class="title_a"><img src="../assets/images/服务评价.png" alt="">服务评价</div>
           <div class="xinxin">描述相符<van-rate
                v-model="ms"
                :size="25"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
                :readonly="falg"
                /><span>{{ms*2}}分</span></div>
           <div class="xinxin">物流速度<van-rate
                v-model="wl"
                :size="25"
                color="#ff8d5b"
                void-icon="star"
                void-color="#eee"
                :readonly="falg"
                /><span>{{wl*2}}分</span></div>
           <div class="xinxin">服务质量<van-rate
                v-model="fu"
                :size="25"
                color="#ff5d5e"
                void-icon="star"
                void-color="#eee"
                :readonly="falg"
                /><span>{{fu*2}}分</span></div>
        </div>
         
        <div class="pj">
            <input type="text" v-model="pj" :disabled="falg">
        </div>
        <van-button type="primary" size="large" @click="tijiao" v-show='!falg'>提交评论</van-button>
    </div>
</template>

<script>
import { Toast } from 'vant';
import {evaluateInfo,xiangq,evaluate} from '../requset/api'
export default {
    data () {
        return {
           data:{prodName:'',receiveTime:'',sendTime:''},
           ms:0,
           wl:0,
           fu:0,
           pj:'',
           // 判断是否是查看评价还是评价  false的时候为查看评价
           falg:true
        }
    },
    created(){
        console.log(this.$route.params.id);
        let serialNo=this.$route.params.id
         evaluateInfo(serialNo).then(res=>{
             if(res.errCode==0){
               console.log(res);
               if(res.data!==null){
                this.data=res.data
               this.ms=res.data.prodConformityPoint
               this.wl=res.data.logisticsSpeedPoint
               this.fu=res.data.serviceQualityPoint
               this.pj=res.data.comment
               this.falg = true
               }else{
               xiangq(serialNo).then(res=>{
               if(res.errCode == 0){
                console.log(res);
               this.data.prodName=res.data.prodName
               this.data.receiveTime=res.data.receiveTime
               this.data.sendTime=res.data.sendTime
               this.falg = false
            }
        })
               }
             }
         })
    },
    methods:{
          fanhui(){
            this.$router.back()
        },
        tijiao(){
            // console.log(this.$route.params.id);
            evaluate({
                serialNo:this.$route.params.id,
                prodConformityPoint:this.ms,
                logisticsSpeedPoint:this.wl,
                serviceQualityPoint:this.fu,
                comment:this.pj
            }).then(res=>{
               if(res.errCode==0){
                   Toast.fail('评价成功');
                   this.$router.back()
               }else{
                   Toast.fail('评价成功');
               }
            })
            // console.log(this.$route.params.id);
        }
    }
}
</script>
 
<style lang = "less" scoped>
.dindan{
    width: 100%;
    min-height: 100vh;
    background:#f5f5f5 ;
    .title{
            background: #003399;
            height: 44px;
            line-height: 44px;
            padding-left: 10px;
            color: #fff;
            text-align: center;
            img{
                height: 16px;
                float: left;
                margin-top: 12px;
            }
            }
        .title_a{
            background: #f5fafe;
            height: 35px;
            padding-top: 10px;
             box-sizing: border-box;
            padding-left: 15px;
            color:#003599;
            line-height: 35px;
            img{
                height: 15px;
                margin-right: 5px;
            }
        }
        .xinxi{
            padding-top: 19px;
            padding-left: 15px;
            background: #fff;
            box-sizing: border-box;
            color: #999999;
            div{
                height: 24px;
                line-height: 24px;
                width: 100%;
                span{
                    float: right;
                    width: 75%;
                    color: #666;
                }
            }
        }
        .fuwu{
            margin-top: 10px;
            background: #fff;
            .xinxin{
              position: relative;
              padding-left: 15px;
              box-sizing: border-box;
                height: 55px;
                line-height: 55px;
                .van-rate{
                    position: absolute;
                    top: 14px;
                    margin-left: 30px;
                    
                }
                span{
                    float: right;
                    margin-right: 15px;
                }
            }
        }

        .pj{
            margin-top: 20px;
            input{
                border: none;
                height: 210px;
                width: 99%;
                background: #fff;
            }
        }
        .van-button{
            width: 90%;
            height: 45px;
            margin-left: 5%;
            background: #003399;
            border: none;
            border-radius:25px ;
            margin-top: 5px;
        }
}
     
</style>